<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>礼拜五详情</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/magnifier.css" />
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.weader {
				width: 1280px;
				height: 50px;
				background: rgb(231, 231, 231);
				margin: 0 auto;
				line-height: 50px;
				margin-top: 20px;
			}
			
			.wlist li {
				float: left;
				margin-left: 10px;
				color: rgb(133, 133, 133);
				font-weight: 300;
			}
			
			.wcount {
				width: 450px;
				height: 55px;
				background: rgb(243, 244, 248);
				line-height: 55px;
				font-size: 20px;
				margin: 0 auto;
				text-align: center;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
			}
			
			.wcount span {
				padding: 5px;
			}
			
			.wcount span:nth-child(3),
			.wcount span:nth-child(5),
			.wcount span:nth-child(7),
			.wcount span:nth-child(2) {
				padding: 5px 10px;
				background: rgb(255, 87, 92);
				color: white;
				border-radius: 10px;
			}
			
			.wcount span:nth-child(4),
			.wcount span:nth-child(6) {
				color: rgb(255, 87, 92);
			}
			
			.wcenter {
				width: 1285px;
				height: 600px;
				margin: 21px auto;
				display: flex;
				justify-content: space-between;
			}
			
			.wcenter_right {
				width: 745px;
				height: 598px;
				box-sizing: border-box;
			}
			
			h1 {
				font-size: 20px;
				margin-top: 20px;
			}
			
			.wcenter_right>span {
				display: inline-block;
				margin-top: 20px;
				margin-left: 20px;
				background: rgb(61, 142, 69);
				padding: 7px 10px;
				color: white;
			}
			
			.wcenter_right>span:nth-of-type(1) {
				margin-left: 0px;
			}
			
			.wcenter_right>span:nth-of-type(2) {
				background: rgb(247, 131, 39);
			}
			
			.wcenter_center {
				height: 185px;
				border-top: 1px solid #BBBBBB;
				border-bottom: 1px solid #BBBBBB;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
			}
			
			.wcenter_center_left {
				margin-top: 20px;
			}
			
			.wcenter_center_right {
				margin-top: 35px;
			}
			
			.wcenter_bottom {
				height: 185px;
				position: relative;
			}
			
			.wcenter_bottom i {
				display: inline-block;
				margin-top: 30px;
			}
			
			.wcenter_bottom i:nth-child(1) {
				font-size: 30px;
				color: red;
				font-weight: 500;
			}
			
			.wcenter_bottom i:nth-child(2) {
				font-size: 20px;
				color: #BBBBBB;
				font-weight: 200;
				margin-left: 20px;
				text-decoration: line-through;
			}
			
			.wcenter_bottom>span {
				display: inline-block;
				margin-top: 30px;
				margin-left: 12px;
				color: #BBBBBB;
			}
			
			.wcenter_bottom>span:nth-of-type(1),
			.wcenter_bottom>span:nth-of-type(5),
			{
				margin-left: 0px;
				font-size: 18px;
			}
			
			.wcenter_bottom>span:nth-of-type(10) {
				font-size: 18px;
			}
			
			.wcenter_bottom>span:nth-of-type(2),
			.wcenter_bottom>span:nth-of-type(3),
			.wcenter_bottom>span:nth-of-type(4),
			.wcenter_bottom>span:nth-of-type(6),
			.wcenter_bottom>span:nth-of-type(7) {
				border: 1px solid #BBBBBB;
				font-size: 18px;
				padding: 5px 10px;
			}
			
			.wcenter_bottom>span:nth-of-type(2) {
				background: rgb(243, 255, 243);
			}
			
			.wcenter_bottom strong {
				display: inline-block;
				font-size: 18px;
				color: #BBBBBB;
				font-weight: 200;
				margin-top: 20px;
			}
			
			.wcenter_bottom>span:nth-of-type(8),
			.wcenter_bottom>span:nth-of-type(10) {
				border: 1px solid #BBBBBB;
				width: 40px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background: #DDDDDD;
			}
			
			.wcenter_bottom>span:nth-of-type(10) {
				margin-left: 0px;
			}
			
			.wcenter_bottom>span:nth-of-type(9) {
				height: 30px;
				width: 50px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #BBBBBB;
				margin-left: 0;
			}
			
			.wcenter_bottom button {
				font-size: 30px;
				margin-left: 25px;
				color: white;
				padding: 5px 10px;
				background: rgb(255, 175, 91);
				border-radius: 10px;
				border: none;
				outline: none;
				vertical-align: middle;
			}
			
			.wcenter_bottom button:nth-of-type(2) {
				padding: 5px 25px;
				background: rgb(247, 131, 39);
			}
			
			.wshoucang {
				display: inline-block;
				color: #BBBBBB;
				font-size: 18px;
				margin-left: 10px;
			}
			
			.bdsharebuttonbox {
				position: absolute;
				right: 360px;
				bottom: -120px;
			}
			
			.wfen {
				margin-left: 10px;
				display: inline-block;
			}
			
			.wheader1,
			.wheader2 {
				width: 1285px;
				height: 50px;
				margin: 0 auto;
				line-height: 50px;
				background: rgb(231, 231, 231);
			}
			
			.wheader1_left,
			.wheader2_left {
				float: left;
			}
			
			.wheader1_left span {
				font-size: 19px;
				color: rgb(49, 49, 50);
				padding-left: 25px;
				padding: 20px 25px;
			}
			
			.wheader1_right {
				float: right;
				background: rgb(246, 130, 39);
				width: 180px;
			}
			
			.wheader1_right img {
				width: 30px;
				height: 30px;
				vertical-align: middle;
			}
			
			.wheader1_right span {
				color: white;
				font-size: 18px;
				padding-left: 23px;
			}
			
			.wcenter1,
			.wcenter2 {
				width: 1280px;
				margin: 0 auto;
				font-size: 18px;
				margin-top: 35px;
			}
			
			h2 {
				color: rgb(246, 130, 39);
			}
			
			p {
				margin-top: 15px;
				color: rgb(133, 133, 133);
				font-size: 17px;
			}
			
			.wcenrer1_bottom {
				margin-top: 30px;
				text-align: center;
			}
			
			.wevaluate {
				width: 1285px;
				height: 200px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				/*display: none;*/
			}
			
			.wevaluate_left {
				width: 600px;
				margin-left: 30px;
				display: flex;
				justify-content: space-between;
			}
			
			.wevaluate_left img {
				vertical-align: top;
				margin-top: 20px;
			}
			
			.wevaluate_left_left {
				float: right;
			}
			
			.wevaluate_left_right {
				margin-right: 30px;
				margin-top: 50px;
			}
			/*遮盖层*/
			.wfade{
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.2);
				position: fixed;
				left: 0;
				top: 0;
				z-index: 10000;
			}
			.wsucc-pop{
				width: 500px;
				height: 300px;
				background: white;
				position: fixed;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 20000;
				text-align: center;
				box-shadow: 0px 0px 2px 3px #BBBBBB inset;
			}
			.wsucc-pop img{
				vertical-align: middle;
			
				margin-top: 50px;
			}
			.wsucc-pop span{
				display: inline-block;
				color: rgb(140,140,140);
				font-size: 20px;
				margin-left: 20px;
				margin-top: 50px;
				vertical-align: middle;
			}
			#w_shopping,#w_examine{
				margin-top: 50px;
				color: white;
				background: rgb(247,131,39);
				padding: 5px 20px;
				font-size: 20px;
				outline: none;
				border: none;
				border-radius: 5px;
				
			}
			#w_examine{
				background: rgb(61,147,67);
			}
			.wfadew{
				display: none;
			}
		</style>
	</head>
	
	<body ng-app="myapp" ng-controller="test">
		<!--<div ng-include="'w-gouwuche.html'" ng-hide="a"></div>-->
		<!--<div >
	   <ng-view></ng-view>-->
	   <div class="wwww">
	   	
	   
		<div class="weader" >
			<ul class="wlist">
				<li>您的当前位置:</li>
				<li>首页</li>
				<li>></li>
				<li>全部商品</li>
				<li>></li>
				<li>苹果</li>
				<li>></li>
				<li>阿克苏</li>
			</ul>
		</div>
		<div class="wcenter">

			<!--放大镜-->
			<div class="magnifier" id="magnifier1">

				<div class="magnifier-container">
					<!--距离倒计时-->
					<div class="wcount">
						<span>距离开始还剩</span>
						<span class="w_data"></span>
						<span class="w_hous"></span>
						<span >:</span>
						<span class="w_fen"></span>
						<span>:</span>
						<span class="w_miao"></span>
					</div>

					<div class="images-cover"></div>
					<!--当前图片显示容器-->
					<div class="move-view"></div>
					<!--跟随鼠标移动的盒子-->
				</div>

				<div class="magnifier-assembly">
					<div class="magnifier-btn">
						<span class="magnifier-btn-left">&lt;</span>
						<span class="magnifier-btn-right">&gt;</span>
					</div>

					<!--按钮组-->
					<div class="magnifier-line">
						<ul class="clearfix animation03">
							<li>
								<div class="small-img">
									<img src="img/wuhuaguo.jpg" />
								</div>
							</li>
							<li>
								<div class="small-img">
									<img src="img/wuhuaguo.jpg" />
								</div>
							</li>
							<li>
								<div class="small-img">
									<img src="img/qiyiguojin.jpg" />
								</div>
							</li>
							<li>
								<div class="small-img">
									<img src="img/taiwan.jpg" />
								</div>
							</li>
							<li>
								<div class="small-img">
									<img src="img/feizixiao.jpg" />
								</div>
							</li>
						</ul>
					</div>
					<!--缩略图-->
				</div>
				<div class="magnifier-view"></div>
				<!--经过放大的图片显示容器-->

			</div>
			<!--中间右边部分-->
			<div class="wcenter_right">
				<h1>新疆哈密瓜1500kg</h1>
				<span>全国</span>
				<span>礼拜五</span>
				<span>次日达</span>
				<span>自营</span>
				<!--中间右边的中间部分-->
				<div class="wcenter_center">
					<div class="wcenter_center_left">
						<img src="img/组 15.png" />
					</div>
					<div class="wcenter_center_right">
						<img src="img/雀斑石榴持续热卖！云南蒙自石榴，原产波斯（今伊朗）一带，公元前二世纪时传 入我国。是中国三大石榴之一，粒大皮薄，汁多味甜爽口。.png" />
					</div>

				</div>
				<!--中间下半部分-->
				<div class="wcenter_bottom">
					<i>现价 : ¥ 20.0 </i>
					<i>原价 : ¥ 40.0 </i><br />
					<span>请选择规格</span>
					<span>500g</span>
					<span>1000g</span>
					<span>2000g</span><br />
					<span>请选择规格</span>
					<span>500g</span>
					<span>1000g</span><br />
					<strong>数 量 : </strong>
					<span id="wjian">➖</span><span id="wshuliang">1</span><span id="wjia">➕</span><span>件</span>
					<button ng-click="wjoin()">加入购物车</button>
					<button>立即购买</button><br />
					<img src="img/youyanse.png" />
					<img src="img/wuyanse.png" />
					<em class="wshoucang">收藏此商品</em>
					<i class="wfen">分享到 : </i>
					<div class="bdsharebuttonbox">
						<a href="#" class="bds_more" data-cmd="more"></a>
						<a href="#" class="bds_qzone" data-cmd="qzone"></a>
						<a href="#" class="bds_tsina" data-cmd="tsina"></a>
						<a href="#" class="bds_tqq" data-cmd="tqq"></a>
						<a href="#" class="bds_renren" data-cmd="renren"></a>
						<a href="#" class="bds_weixin" data-cmd="weixin"></a>
					</div>

				</div>
			</div>
		</div>

		<div class="wheader1">
			<div class="wheader1_left">
				<span class="wProduct">商品详情</span>
				<span class="wpingjia">商品评价</span>

			</div>

		</div>
		<!--中部介绍-->
		<div class="wcenter1">
			<h2>男士短衬衫</h2>
			<p>明水礼盒十分优秀,是送朋友,送亲人的不二选择</p>
			<p>什么,您还不知道明水礼盒,今年过年不收礼,收礼只收明水礼盒,你out了,赶紧买起礼盒送亲朋,送好友吧</p>
			<p>完成交易.如有剩余库存,从新上架产品</p>
		</div>
		<div class="wcenrer1_bottom">
			<img src="img/sirendingzhi.png" />
		</div>

		<!--评价-->
		<div class="wevaluate">
			<div class="wevaluate_left">
				<div class="ww">
					<img src="img/touxiang.png" />
					<p>155****0250</p>
				</div>

				<div class="wevaluate_left_left">
					<img src="img/youyanse.png" />
					<p>帮同事买的,很帅很好看,店家服务很好 帮同事买的,很帅很好看,店家服务很好 帮同事买的,很帅很好看,店家服务很好</p>
					<img src="img/pingjia.png" />
				</div>

			</div>
			<div class="wevaluate_left_right">
				<p>2.16-5-12 19:22</p>
			</div>
		</div>
                                    <!--加入购物车弹框-->
                                    <!--最大的遮盖层-->
                                    <div class="wfadew">
                                    	   <div class="wfade"> </div>
                                    <!--小弹框-->
                                    <div class="wsucc-pop">
                                    	<img src="img/zhifuchneggong.png"/>
                                    	<span>已成功加入购物车</span><br />
                                    	<button id="w_shopping" ng-click="w_shopping()"  ><a href="#/b">继续购物</a></button>
                                   <button id="w_examine"> <a href="#/w-gouwuche" ng-click="goto()">查看购物车</a>	</button>
                                    	
                                    </div>
                                    	
                                    </div>
                                 </div>
                              
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/magnifier.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	
		 function GetRTime(){
    var EndTime= new Date('2017/07/22 14:03:00');
    var NowTime = new Date();
    var t =EndTime.getTime() - NowTime.getTime();
    var d=0;
    var h=0;
    var m=0;
    var s=0;
    if(t>=0){
      d=Math.floor(t/1000/60/60/24);
      h=Math.floor(t/1000/60/60%24);
      m=Math.floor(t/1000/60%60);
      s=Math.floor(t/1000%60);
    }
//循环时间
if(d<2){ 
	EndTime.setDate(EndTime.getDate()-(-5))
}
 
 
    $(".w_data").text( d + "天") ;
    $(".w_hous").text( h + "时") ;
   $(".w_fen").text( m+ "分") ;
    $(".w_miao").text( s + "秒") ;
  }
  setInterval(GetRTime,0);
		
		
		var app=angular.module("myapp",[]);
		//当点击查看购物车时
//		app.config(function($routeProvider){
//			
//				$routeProvider.when("/w-gouwuche",{
//					templateUrl:"w-gouwuche.html"
//				})
//			})
		app.controller("test",function($scope){
$scope.wjoin=function(){
				$(".wfadew").show(500)
			}
			//当点击继续购物
			$("#w_shopping").click(function(){
				
				$(".wfadew").hide(500)
			})
		
		})
		
		
		var		num=1
		$("#wjia").click(function(){
	
	
			$("#wshuliang").text(num++)
		})
		$(function() {
				$(".wevaluate").hide()
			var magnifierConfig = {
				magnifier: "#magnifier1", //最外层的大容器
				width: 500, //承载容器宽
				height: 500, //承载容器高
				moveWidth: null, //如果设置了移动盒子的宽度，则不计算缩放比例
				zoom: 5 //缩放比例
			};
			var _magnifier = magnifier(magnifierConfig);
		});
		//点击商品详情
		$(".wProduct").click(function() {
			$(".wcenrer1_bottom").show()
			$(".wcenter1").show()
			$(".wevaluate").hide()
			$(".wProduct").css("background", "white").css("border-top", "#008000").css("color", "#008000")
				$(".wpingjia").css("background", "white").css("border-top", "#008000").css("color", "black")
		})
		//点击商品评价
		$(".wpingjia").click(function() {
			$(".wcenrer1_bottom").hide()
			$(".wcenter1").hide()
			$(".wevaluate").show()
			$(".wpingjia").css("background", "white").css("border-top", "#008000").css("color", "#008000")
			$(".wProduct").css("background", "white").css("border-top", "#008000").css("color", "black")
		})
	</script>

	<script>
		window._bd_share_config = {
			"common": {
				"bdSnsKey": {},
				"bdText": "",
				"bdMini": "2",
				"bdPic": "",
				"bdStyle": "0",
				"bdSize": "16"
			},
			"share": {},
			"image": {
				"viewList": ["qzone", "tsina", "tqq", "renren", "weixin"],
				"viewText": "分享到：",
				"viewSize": "16"
			},
			"selectShare": {
				"bdContainerClass": null,
				"bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]
			}
		};
		with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
	</script>

</html>